我在我轉職前端生涯第一間公司待了 2 年多
前面章節有提過，因為是身在天天如戰場的接案公司
再加上那時我的公司應該算是工作室的規模
員工數其實不超過 10 人 (固定咖只有 4 人)

而阿宅 PO 我，則是全公司唯一的 網頁設計師 / 前端設計師...
那時候還要兼 UI/UX 和 PM 呢... (菸)

而為了每個案子能如期交件 (因為才有錢收)
如何把時間像擠乳溝一樣給擠出來，我真是煞費苦心 (不要亂用成語)
那時很積極加入技術社群以及跑社群的聚會和講座
有夥伴推薦我學習 Gulp 這一套自動化工具

所謂的自動化工具
就是可以把我們每天必做的例行作業，寫成一個個 Task
然後依照你的開發需求，做排序之後再一個 Task 一個 Task 執行
就像有一個隱形的開發 SOP 工廠，幫你把固定要做的工作
第一關 => 第二關 => 第三關...這樣執行過去

安裝 Gulp

接下來會是以 Gulp v3.9.1 版本為主來講解流程
主要是大概跑過安裝流程和 Gulp 設定
細節的部分會比較少唷~~

1. Node v11.15.0
   npm install node@11.15.0 -g
   推薦使用 NVM 做為管理 Node 版本的工具
2. Gulp v3.9.1
   npm install gulp@3.9.1 -g
3. 建立 Package.json
   npm init
4. 建立 gulpfile.js

這邊簡單說明 gulpfile Task 架構

gulp.task('plugin', function() {
  return gulp
    .src('./source/js/plugin/*.js')
    .pipe(gulp.dest('./build/js'))
});

1. 建立 Task

gulp.task('*task name*', function() {
    Return gulp
      Code...
});

2. .src() Source Code 的位置
3. .pipe(gulp.dest('./build/js')) 編譯後的檔案存檔路徑

以上是快速帶過，我在轉職前端工程師時的學習過程
而 Gulp 目前已升級到 Gulp 4，那為何要介紹 Gulp 3 呢?
原因是主要用意是讓設計師簡單了解自動化工具是什麼，而 Gulp 3 我覺得相對好懂
目前就業市場上大多使用 Webpack 這套工具，可是我覺得它複雜很多
如果讓初學的捧油直接去學 Webpack 會跟我前面說的一樣，驚嚇度 100

我自己也是從 Gulp 3 入門，這對後來我在學習 Webpack 時很有幫助
把 Gulp 3 當成是一塊敲門磚，一步一步慢慢來

慢慢來，比較快嘛~